<template>
  <div class="home">
    <headTop></headTop>
    <section class="data_section">
      <header class="section_title">数据统计</header>
      <el-row :gutter="20" style="margin-bottom: 20px">
        <el-col :span="4">
          <div class="data_list today_head">
            <span class="head">当日数据：</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="data_list">
            <span>{{userCount}}</span>新增用户
          </div>
        </el-col>
        <el-col :span="4">
          <div class="data_list">
            <span>{{orderCount}}</span>新增订单
          </div>
        </el-col>
        <el-col :span="4">
          <div class="data_list">
            <span>{{adminCount}}</span>新增管理员
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="4">
          <div class="data_list all_head">
            <span class="head">总数据：</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="data_list">
            <span>{{allUserCount}}</span>注册用户
          </div>
        </el-col>
        <el-col :span="4">
          <div class="data_list">
            <span>{{allOrderCount}}</span>订单
          </div>
        </el-col>
        <el-col :span="4">
          <div class="data_list">
            <span>{{allAdminCount}}</span>管理员
          </div>
        </el-col>
      </el-row>
    </section>
    <!-- 图表分析 -->
    <tendency :sevenDate='sevenDate' :sevenDay='sevenDay'></tendency>
  </div>
</template>

<script>
import headTop from "../components/headTop";
import tendency from "../components/tendency";
import moment from "moment";
import {
  userCount,
  orderCount,
  getUserCount,
  getOrderCount,
  adminDayCount,
  adminCount,
} from "../api/getData";
export default {
  data() {
    return {
      userCount: null, // 新增用户
      orderCount: null, // 新增订单
      adminCount: null, // 新增管理员
      allUserCount: null, // 注测用户
      allOrderCount: null, // 订单
      allAdminCount: null, // 管理员
      sevenDay: [], // 日期
      sevenDate: [[], [], []], // y 轴 数据
    };
  },
  mounted() {
    this.initData();
    console.log(new Date().getTime());
    for (let i = 6; i > -1; i--) {
      const date = moment(new Date().getTime() - 86400000 * i).format(
        "YYYY-MM-DD"
      );
      this.sevenDay.push(date);
    }
    this.getSevenDate();
  },
  components: {
    headTop,
    tendency,
  },
  methods: {
    async initData() {
      const item = moment().format("YYYY-MM-DD");
      console.log(item);
      const res = await Promise.all([
        userCount(item),
        orderCount(item),
        adminDayCount(item),
        getUserCount(),
        getOrderCount(),
        adminCount(),
      ]);
      // console.log("res=======", res);
      this.userCount = res[0].data.count;
      this.orderCount = res[1].data.count;
      this.adminCount = res[2].data.count;
      this.allUserCount = res[3].data.count;
      this.allOrderCount = res[4].data.count;
      this.allAdminCount = res[5].data.count;
    },
    async getSevenDate() {
      const apiArr = [[], [], []];
      this.sevenDay.forEach((item) => {
        apiArr[0].push(userCount(item));
        apiArr[1].push(orderCount(item));
        apiArr[2].push(adminDayCount(item));
      });
      //  console.log('apiArr=======',apiArr);
      const promiseAll = [...apiArr[0], ...apiArr[1], ...apiArr[2]];
      console.log("promisAll====", promiseAll);
      const res = await Promise.all(promiseAll);
      // console.log("res2======", res);
      const resArr = [[], [], []];
      res.forEach(({data}, index) => {
        if(data.status == 1){
          // console.log('aaa======',Math.floor(index/7));
          resArr[Math.floor(index / 7)].push(data.count)
        }
      });
      // console.log('resArr======',resArr);
      this.sevenDate = resArr
    },
  },
};
</script>

<style lang='less' scoped>
.data_section {
  padding: 20px;
  margin-bottom: 40px;
}
.section_title {
  text-align: center;
  font-size: 30px;
  margin-bottom: 20px;
}
.data_list {
  background-color: #e5e9f2;
  text-align: center;
  font-size: 14px;
  border-radius: 6px;
  padding: 5px 0;
  color: #666;
  span {
    font-size: 22px;
    margin-right: 5px;
    color: black;
  }
}
.all_head,
.today_head {
  .head {
    color: #ffffff;
  }
}
.today_head {
  background-color: #ff9800;
}

.all_head {
  background-color: #20a0ff;
}
</style>